<template>
  <el-dialog v-model="open" title="标签管理" width="700px" @open="openDialog" @close="exit">
    <el-row :gutter="20" justify="space-between">
      <el-col :span="16">
        <el-input v-model="queryParams.name" placeholder="在此输入标签名称" clearable @clear="searchLabel"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="searchLabel">搜索标签</el-button>
        <el-button type="primary" @click="addLabel">添加标签</el-button>
      </el-col>
    </el-row>
    <p>
      <el-table :data="tableData" ref="tableRef" border class="normal-table" @selection-change="selectChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="标签名称" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="deleteItem(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
        v-model:limit="queryParams.rows" @pagination="searchLabel" />
    </p>
    <template #footer>
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button plain @click="exit">退出</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { save, getAll, deleteList } from '@/api/knowledgeManage/label'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  open: Boolean,
  role: String,
  name: String
})
const emits = defineEmits(['update:open', 'update:name'])
const { proxy } = getCurrentInstance()
const data = reactive({
  queryParams: {
    name: '',
    page: 1,
    rows: 10,
    role: props.role
  },
  total: 0,
  tableData: []
})
const { queryParams, total, tableData } = toRefs(data)
const tableRef = ref()

const searchLabel = () => {
  getAll(queryParams.value).then(res => {
    total.value = res.data.total
    tableData.value = res.data.rows
    props.name && props.name.split(',').map(labelName => {
      let row = tableData.value.find(item => item.name == labelName)
      nextTick(() => {
        tableRef.value.toggleRowSelection(row, true)
      })
    })
  })
}
const addLabel = () => {
  if (queryParams.value.name) {
    let data = { name: queryParams.value.name, role: props.role }
    save(data).then(res => {
      proxy.$modal.msgSuccess('添加成功！')
      queryParams.value.name = ''
      searchLabel()
    })
  } else {
    proxy.$modal.msgWarning('请先输入标签名字！')
  }
}
const deleteItem = (row) => {
  ElMessageBox.confirm(`是否确定删除${row.name}？`, "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
    cancelButtonClass: 'is-plain'
  }).then(() => {
    return deleteList(row.id)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    searchLabel()
  })
}
const ids = ref([])
const names = ref([])
const selectChange = (selection) => {
  ids.value = selection.map(item => item.id)
  names.value = selection.map(item => item.name).join(',')
}
const confirm = () => {
  emits('update:name', names.value)
  exit()
}
const exit = () => {
  emits('update:open', false)
}
const openDialog = () => {
  searchLabel()
}
</script>